<template>
	<div>
		<LoginHead>
			登陆 | 注册
		</LoginHead>
		<div class="register">
			<van-cell-group>
				<van-field v-model="username" label="手机号" colon placeholder="请输入手机号" required :error-message="telerror">
				</van-field>
			</van-cell-group>
			<van-field v-model="sms" :disabled='sendinput' center clearable required label="短信验证码"
				placeholder="请输入短信验证码">
				<template #button>
					<van-button size="small" type="primary" :disabled='sendbtn' @click='send'>{{sendtips}}</van-button>
				</template>
			</van-field>
			<van-cell-group>
				<van-field v-model="password" type="password" label="密码" placeholder="请输入6-15位密码 包含字母和数字" required
					:error-message="passerror"></van-field>
			</van-cell-group>
			<van-cell-group>
				<van-field v-model="re_password" type="password" label="确认密码" placeholder="请输入密码" required
					:error-message="re_paerror"></van-field>
			</van-cell-group>
			<div style="margin: 1rem;">
				<van-button type="primary" block round @click="register" :disabled='active'>注册</van-button>
			</div>
			<van-button to='/Login' style="float: right;height: 1.25rem;background: transparent;">立即登录</van-button>
		</div>
	</div>
</template>

<script>
	import LoginHead from '../../../components/Myhead.vue'
	import Vue from 'vue';
	import {
		Field
	} from 'vant';
	import {
		Button
	} from 'vant';
	import {
		Cell,
		CellGroup
	} from 'vant';

	Vue.use(Cell);
	Vue.use(CellGroup);
	Vue.use(Button);
	Vue.use(Field);
	import {
		Toast
	} from 'vant';

	export default {
		data() {
			return {
				username: '',
				password: '',
				re_password: '',
				sms: '',
				active: true,
				sendinput: true,
				sendbtn: true,
				sendtips: '发送验证码',
				telerror: '',
				passerror: '',
				re_paerror: ''
			};
		},
		components: {
			LoginHead
		},
		methods: {
			async register() {
				let password = this.password
				let sms = this.sms
				let tel = this.username
				//判断手机号是否符合要求
				var teltest = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				//至少包含数字跟字母，可以有字符 长度6到15位
				var passtest = /^(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,15}$/
				console.log(teltest.test(tel))
				if (teltest.test(tel)) {
					if (passtest.test(password)) {
						if (this.password == this.re_password) {
							var data = await this.$http.post('/login/register', {
								tel,
								sms,
								password
							})
							console.log(data)
							switch (data.data.code) {
								case -1:
									Toast.loading({
										message: data.data.message
									})
									break;
								case -2:
									Toast.loading({
										message: data.data.message
									})
									break;
								case -3:
									Toast.loading({
										message: data.data.message
									})
									break;
								case -4:
									Toast.loading({
										message: data.data.message
									})
									this.sms = ''
									break;
								default:
									Toast.loading({
										message: data.data.message,
										duration: 200
									})
									this.$router.push({
										path: '/Login'
									})
							}
						} else {
							this.re_paerror = '密码不相同'
						}
					} else {
						this.passerror = '密码不符合要求'
					}
				} else {
					this.telerror = '手机号错误'
				}

			},

			send() {
				let tel = this.username
				this.$http.get('/sms/send', {
					tel
				}).then(res => {
					if (res.data.code == 200) {
						Toast.loading({
							message: '你的验证码是' + res.data.Verification,
							duration: 2000
						})
					}
				})
				this.sendbtn = true
				this.sendinput = false
				setTimeout(() => {
					this.sendbtn = false
				}, 1000 * 60)
			}
		},
		watch: {
			username() {
				if (this.username.length >= 11) {
					this.sendbtn = false
				} else {
					this.sendbtn = true
				}
				if (this.username.length != 0 && this.password != 0 && this.re_password != 0 && this.sms != 0) {
					this.active = false
				} else {
					this.telerror = ''
					this.active = true
				}
			},
			password() {
				if (this.username.length != 0 && this.password != 0 && this.re_password != 0 && this.sms != 0) {
					this.active = false
				} else {
					this.active = true
					this.passerror = ''
				}
			},
			sms() {
				if (this.username.length != 0 && this.password != 0 && this.re_password != 0 && this.sms != 0) {
					this.active = false
				} else {
					this.active = true
				}
			},
			re_password() {
				if (this.username.length != 0 && this.password != 0 && this.re_password != 0 && this.sms != 0) {
					this.active = false
				} else {
					this.active = true
				}
			}
		}
	};
</script>

<style>
	.register {
		/* position: fixed;
		display: flex;
		width: 100%;
		top: 46px;
		bottom: 0;
		justify-items: center; */
		margin-top: 2.875rem;
	}
</style>
